<template>
  <div class="main-div">
    <Row>
      <Col span="24" />
      <bus-obj
        :single-show.sync="busShow"
        :on-ok="confirmDialogSingleEvent"
        :exist-data="mainTable"
      />
      <Card>
        <p slot="title">
          新增表单
        </p>
        <Form ref="formInline" :model="formInline" :label-width="80" :rules="ruleValidate">

          <FormItem prop="groupName" label="表单分类">
            <treeselect
              v-model="formInline.groupName"
              class="input_w"
              :normalizer="normalizer"
              :multiple="false"
              placeholder="请选择"
              :options="categoryData"

              @select="selectTree"
              @input="clearOnSelect"
            />

          </FormItem>

          <FormItem prop="name" label="表单名称">
            <Input v-model="formInline.name" type="text" class="input_w" />
          </FormItem>

          <FormItem prop="formKey" label="别名">
            <Input v-model="formInline.formKey" type="text" class="input_w" />
          </FormItem>
          <FormItem prop="formBusinessId" label="业务对象">
            <el-tag
              v-if="(mainTable)"
              type="success"
            >
              {{ mainTable.objName }}

            </el-tag>
            <Button
              type="primary"
              style="margin-bottom: 2px;margin-right: 15px;"
              @click="addBus"
            >选择
            </Button>

          </FormItem>
          <FormItem prop="formType" label="类型">
            <Select v-model="formInline.formType" class="input_w">
              <Option v-for="item in formTypeList" :key="item.value" :value="item.value">{{ item.label }}</Option>
            </Select>
          </FormItem>
          <FormItem prop="objDesc" label="描述">
            <Input v-model="formInline.objDesc" type="textarea" :autosize="{minRows: 2,maxRows: 8}" class="input_w" />
          </FormItem>

        </Form>
        <el-button type="primary" :loading="loading" @click="add">下一步</el-button>

        <!--        <Button  type="primary" style="margin-bottom: 2px;margin-right: 15px;"-->
        <!--                 @click="">-->
        <!--        </Button>-->
      </Card>

      </Col>

    </Row>
  </div>

</template>

<script>
import busObj from '@/views/common/busObj'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'

import {
  getTypesByKey,
  designSave,
  getBusinessTableListJson,
  businessTableSave,
  businessTableGet,
  businessTableCreate,
  businessTableColumnDelete,
  businessObjectGet,
  businessObjectSave
} from '@/api/form'
export default {
  name: 'FormDesign',
  components: {
    busObj,
    Treeselect
  },

  data() {
    return {
      mainTable: null,
      loading: false,
      categoryData: [],
      modelerSrc: '',
      busShow: false,
      baseURL: process.env.VUE_APP_BASE_BPM_API,
      ruleValidate: {
        groupName: [
          { required: true, message: '请选择分类', trigger: 'change' }
        ],
        name: [
          { required: true, message: '请输入表单名称', trigger: 'blur' }
        ],
        formKey: [
          { required: true, message: '请输入别名', trigger: 'blur' }
        ],
        formType: [
          { required: true, message: '请输入类型', trigger: 'blur' }
        ],
        formBusinessId: [
          { required: true, message: '请选择业务对象', trigger: 'change' }
        ]

      },

      formInline: {
        name: '',
        code: '',
        description: '',
        mainTable: '',
        formBusinessId: '',
        groupName: null,
        groupId: '',
        formType: 'pc',
        id: ''
      },
      formTypeList: [
        { label: 'PC表单', value: 'pc' },
        { label: '手机表单', value: 'mobile' }

      ]
    }
  },
  mount() {
    this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop
  },
  created() {
    this.getData()
  },
  methods: {
    // 后台返回的数据如果和VueTreeselect要求的数据结构不同，需要进行转换
    normalizer(node) {
      // 去掉children=[]的children属性
      if (node.children && !node.children.length) {
        delete node.children
      }
      return {
        id: node.title,
        label: node.title,
        children: node.children
      }
    },
    selectTree: function(node, instanceId) {
      this.formInline.groupId = node.id
      this.formInline.groupName = node.title
      this.validateFormInline()
    },
    validateFormInline: function() {
      this.$nextTick(() => {
        this.$refs['formInline'].validate((valid) => {

        })
      })
    },
    clearOnSelect: function(node, instanceId) {
      if (!node) {
        this.formInline.groupId = ''
        this.formInline.groupName = null
        this.validateFormInline()
      }
    },
    confirmDialogSingleEvent: function(data) {
      if (data) {
        this.mainTable = data
        this.formInline.mainTable = data.tableName
        this.formInline.formBusinessId = data.id
        this.validateFormInline()
      }
    },
    addBus: function() {
      this.busShow = true
    },
    add: function() {
      this.$refs['formInline'].validate((valid) => {
        if (valid) {
          var that = this
          that.loading = true
          designSave(this.formInline).then((response) => {
            var code = response.code
            if (code === 0) {
            // formModeler
              that.loading = false

              this.$router.push({ name: 'formModeler', query: { t: new Date().getTime(), 'id': response.id }})
            } else {
              that.loading = false
              this.$message({ 'duration': 800, message: response.msg, type: 'warning', customClass: 'zZindex' })
            }
          })
        }
      })
    },
    queryFormCreateTime: function(e) {
      this.queryForm.createTime = e
    },
    refreshTask: function(data) {
      if (data[0].parentId == '-1') {
        this.queryForm.groupId = ''
      } else {
        this.queryForm.groupId = data[0].id
      }
      this.getData()
    },
    queryMethod: function() {
      var name = this.queryForm.name
      var whereSql = ''
      var createTime = this.queryForm.createTime
      if (createTime) {
        if (createTime[0]) {
          whereSql = "  CREATE_TIME_  between '" + createTime[0] + "' and " + "'" + createTime[1] + "'"
        }
      }
      this.queryForm.whereSql = whereSql
      getTaskData(this.queryForm).then((response) => {
        this.tableData = response.data
        if (response.count.length > 0) {
          this.total = parseInt(response.count)
        } else {
          this.total = 0
        }
      })
    },
    getTypesByKeyAction: function() {
      getTypesByKey().then((response) => {
        this.categoryData = response.data
      })
    },
    initData: function() {
      this.getTypesByKeyAction()
      this.getData()
    },
    getData: function() {
      getTypesByKey().then((response) => {
        this.categoryData = response.data
      })
    },
    handleCurrentChange(val) {
      this.queryForm.page = val
      this.getData()
    },
    handleClick(data) {
      this.$router.push({ name: 'businessTableInnerAdd', query: { t: new Date().getTime(), 'id': data.id, 'operate': data.type, 'edit': true }})
    },
    handleDelClick(data) {
      businessTableDel(data.id).then((response) => {
        if (response.code == 0) {
          this.$message({ 'duration': 800, message: '操作成功', type: 'warning', customClass: 'zZindex' })

          this.getData()
        } else {
          this.$message({ 'duration': 800, message: '操作成功', type: 'warning', customClass: 'zZindex' })
        }
      })
    },
    search() {
      this.queryForm.page = 0
      this.queryMethod()
    },
    reset() {
      this.queryForm.name = ''
      this.queryForm.createTime = ''
      this.queryForm.whereSql = ''
      this.queryDate = []
      this.getData()
    }

  }

}

</script>
<style lang="scss">
  .task-card{
    margin-top: 10px;
  }
  .input_w {
    width: 30% !important;
  }

</style>
